<template>
  <div class="content">
    <div class="layout">
      报表
      <baidu-map
        class="bm-view"
        :center="{ lng: 116.404, lat: 39.915 }"
        :scroll-wheel-zoom="true"
        :zoom="5.4"
      >
        <bm-map-type
          :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
          anchor="BMAP_ANCHOR_TOP_LEFT"
        ></bm-map-type>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bml-marker-clusterer :averageCenter="true">
          <bm-marker
            v-for="marker of markers"
            :key="JSON.stringify(marker)"
            :position="{ lng: marker.lng, lat: marker.lat }"
            :icon="{
              url: `http://127.0.0.1:5500/demo/data.html`,
              size: { width: 31, height: 36 }
            }"
          ></bm-marker>
        </bml-marker-clusterer>
        <bm-overlay
          pane="labelPane"
          v-for="marker of markers"
          :key="JSON.stringify(marker)"
          :lng="marker.lng"
          :lat="marker.lat"
          :class="{ sample: true }"
          @draw="draw"
        >
          <div class="marker-arrow">{{ marker.title }}</div>
        </bm-overlay>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
  components: {
    BmlMarkerClusterer
  },
  data() {
    return {
      markers: [],
      active: false
    };
  },
  created() {
    // 插入 10 个随机点
    const markers = [];
    for (let i = 0; i < 10; i++) {
      const position = {
        lng: Math.random() * 40 + 85,
        lat: Math.random() * 30 + 21,
        title: `第${i}个`
      };
      markers.push(position);
    }
    this.markers = markers;
    console.log(this.markers);
  },
  methods: {
    draw({ el, BMap, map }) {
      console.log(el.getAttribute("lng"));
      let lng = el.getAttribute("lng");
      let lat = el.getAttribute("lat");
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x + 28 + "px";
      el.style.top = pixel.y - 22 + "px";
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: calc(100vh - 85px);
  background: rgba(245, 246, 248, 1);
  padding: 10px;

  .layout {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;

    .sample {
      position: absolute;
    }

    .marker-arrow {
      white-space: nowrap;
      background: rgba(44, 200, 138, 0.85);
      color: #fff;
      padding: 6px 20px;
      border-radius: 4px;
      position: relative;

      &:before {
        content: "";
        position: absolute;
        border-width: 8px;
        border-style: solid;
        border-color: transparent rgba(44, 200, 138, 0.85) transparent
          transparent;
        top: 6px;
        left: -16px;
        overflow: hidden;
      }
    }

    .bm-view {
      width: 40%;
      height: 40%;

      /deep/ .anchorBL{//去除文字标识
        display: none;
      }
    }
  }
}
</style>
